<template>
	<view class="all-main">
		<view class="main">
			<view class="total">
				<view class="title">
					<text>日统计(日均线)</text>
					<view class="charts-type">
						<view class="line" @click="chartsType(1)">
							<u-icon name="../../../../static/icons/line-charts.png"></u-icon>
							<text>折线图</text>
						</view>
						<view class="columnar" @click="chartsType(2)">
							<u-icon name="../../../../static/icons/columnar-charts.png"></u-icon>
							<text>柱状图</text>
						</view>
					</view>
				</view>
				<view v-if="charts_type == 1" class="charts">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
				</view>
				<view v-else class="charts">
					<qiun-data-charts type="column" :opts="optsB" :chartData="chartDataB" :ontouch="true" />
				</view>
			</view>
			<view class="total" style="margin-top: 30rpx;">
				<view class="title">
					<text>日统计(交易)</text>
					<view class="charts-type">
						<view class="line" @click="chartsTypeDay(1)">
							<text>本月</text>
						</view>
						<view class="columnar" @click="chartsTypeDay(2)">
							<text>上月</text>
						</view>
					</view>
				</view>
				<view v-if="charts_type_day == 1" class="charts">
					<qiun-data-charts type="column" :opts="optsC" :chartData="chartDataC" :ontouch="true" />
				</view>
				<view v-else class="charts">
					<qiun-data-charts type="column" :opts="optsD" :chartData="chartDataD" :ontouch="true" />
				</view>
			</view>
			<view class="loss-customers">
				<view class="heads">
					<view class="lefts">
						<text>上月流失客户</text>
					</view>
					<view class="rights">
						<text>交易(月均)</text>
					</view>
				</view>
				<view v-if="lastLossData.length > 0" class="content">
					<view v-for="(item, index) in lastLossData" :key="index" class="items">
						<view class="lefts">
							<text>{{item.merchant_names}}</text>
						</view>
						<view class="rights">
							<text>{{item.money}}</text>
						</view>
					</view>
					<view class="loss-count">
						<text>总计</text>
						<text class="values">{{lastLossTotal}}</text>
					</view>
				</view>
				<view v-else class="no-data">
					<text>上月没有流失客户</text>
				</view>
			</view>
			<view class="loss-customers">
				<view class="heads">
					<view class="lefts">
						<text>本月流失客户</text>
					</view>
					<view class="rights">
						<text>交易(月均)</text>
					</view>
				</view>
				<view v-if="nowLossData.length > 0" class="content">
					<view v-for="(item, index) in nowLossData" :key="index" class="items">
						<view class="lefts">
							<text>{{item.merchant_names}}</text>
						</view>
						<view class="rights">
							<text>{{item.money}}</text>
						</view>
					</view>
					<view class="loss-count">
						<text>总计</text>
						<text class="values">{{nowLossTotal}}</text>
					</view>
				</view>
				<view v-else class="no-data">
					<text>本月没有流失客户</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	export default {
		data() {
			return {
				agent_no: '',
				charts_type: 1,
				charts_type_day: 1,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount: 5,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				chartDataB: {},
				optsB: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				chartDataC: {},
				optsC: {
					color: ["#EE6666", "#1890FF", "#91CB74", "#FAC858", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount: 5,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				chartDataD: {},
				optsD: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount: 5,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				lastLossData: [],
				lastLossTotal: '0.00',
				nowLossData: [],
				nowLossTotal: '0.00',
			}
		},
		onLoad(e) {
			this.agent_no = e.agent_no
			this.getServerData();
			this.getLossMerchant()
			this.getHzyDayTradeTotal()
		},
		methods: {
			// 获取图标数据
			async getServerData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyChartData',
					data: {
						agent_no: this.agent_no
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.chartData = res.data.line
					this.chartDataB = res.data.columnar
				}
			},
			// 获取日交易量
			async getHzyDayTradeTotal() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyDayTradeTotal',
					data: {
						agent_no: this.agent_no
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.chartDataC = res.data.data
					this.chartDataD = res.data.dataP
				}
			},
			// 获取上月流失客户
			async getLossMerchant() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getLossMerchant',
					data: {
						agent_no: this.agent_no
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.lossData = res.data.data
					this.lastLossTotal = res.data.total
				}
			},
			// 图表类型切换
			chartsType(type) {
				this.charts_type = type
			},
			// 柱状图切换
			chartsTypeDay(type) {
				this.charts_type_day = type
			},
		}
	}
</script>

<style lang="scss">
	.all-main {

		.main {
			.total {
				background-color: #ffffff;
				padding: 20rpx 0;

				.title {
					margin-left: 20rpx;
					border-left: 10rpx solid #2979ff;
					padding-left: 20rpx;
					padding-right: 20rpx;
					font-weight: bold;
					margin-bottom: 40rpx;
					display: flex;
					justify-content: space-between;

					.charts-type {
						font-size: 24rpx;
						display: flex;
						align-items: center;

						.line {
							color: #18b566;
							display: flex;
						}

						.columnar {
							margin-left: 26rpx;
							display: flex;
							color: #f29100;
						}

						text {
							padding-left: 6rpx;
						}
					}
				}
			}

			.loss-customers {
				margin-top: 30rpx;
				background-color: #ffffff;
				padding: 20rpx;

				.heads {
					display: flex;
					justify-content: space-between;
					font-weight: bold;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #f4f4f5;
				}

				.items {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #f4f4f5;
				}

				.loss-count {
					padding-top: 20rpx;
					text-align: right;
					font-size: 28rpx;
					font-weight: bold;

					.values {
						color: #fa3534;
						padding-left: 10rpx;
						font-size: 36rpx;
					}
				}

				.no-data {
					text-align: center;
					font-size: 24rpx;
					padding-top: 20rpx;
					color: #909399;
				}
			}
		}
	}
</style>